<script setup>
import DictTable from "@/views/sys/dict/components/dict-table.vue";
import {ref} from "vue";
import {usePagination} from "@/composables/use-pagination.js";
import {useSysDictPage} from "@/composables/sys/dict.js";
import DictForm from './components/dict-form.vue'
import DictSearch from "./components/dict-search.vue";

const idTemp = ref(null)
// 表单显示
const formShow = ref(false)
// 分页
const {
  pagination,
  filters,
  queryParams,
  setPage,
  setPageSize,
  resetFilters
} = usePagination({
  name: null,
  code: null
})

const {data, isLoading, refetch} = useSysDictPage(queryParams)


// 新增按钮
const handleAdd = () => {
  formShow.value = true
}

// 关闭表单
const handleClose = () => {
  idTemp.value = null
  formShow.value = false
}

// 编辑
const handleEdit = (id) => {
  idTemp.value = id
  formShow.value = true
}

</script>

<template>
  <div class="flex flex-col h-full">
    <dict-search
        :filters="filters"
        :refetch="refetch"
        :reset="resetFilters"
    />
    <dict-table
        class="flex-1"
        @on-add="handleAdd"
        @on-edit="handleEdit"
        :data="data?.data?.records || []"
        :is-loading="isLoading"
        :page="pagination.page"
        :size="pagination.pageSize"
        @update:page="setPage"
        @update:page-size="setPageSize"
        :total="Number(data?.data?.totalRow || 0)"/>
    <dict-form
        :show="formShow"
        @close="handleClose"
        :id="idTemp"
    />
  </div>
</template>

<style scoped>

</style>